<template>
    <div v-if="hasdata==0">
    </div>
    <div class="pic-recomd" v-else-if="hasdata==1">
        <v-header>
            <div class="nav-tab2">
                <h3>图集推荐</h3>
            </div>
        </v-header>
        <div class="compents_con">
            <Recomd-articles :artlist='relateArticles' :listType="listType" :load='getRelate'></Recomd-articles>
            <Warning-box v-if="!insq"></Warning-box>
            <Article-label :labelists="labels"></Article-label>
            <Zan-report v-if="!insq" :diglist='digList' :artitype="1"></Zan-report>
            <Recomd-prods :recomdId='articleid' :isHideTitle="false"></Recomd-prods>
            <template v-if="!insq">
              <Comments :comments='commentList' :lengComt="comtLength" :artitype="1"></Comments>
              <Comment-fixed :articleInfo='articledtl'></Comment-fixed>
              <Backto-article></Backto-article>
            </template>
        </div>
    </div>
    <v-error v-else></v-error>
</template>
<script>
import { ArticleDetail, ArticleRelated, ArticleDetailSub } from '../../../common/api/article'
import WarningBox from '../../templates/WarningBox'
import ArticleLabel from '../../templates/ArticleLabel'
import RecomdArticles from '../../templates/RecomdArticles'
import ZanReport from '../../templates/ZanReport'
import RecomdProds from '../../templates/RecomdProds'
import Comments from '../../templates/Comments'
import CommentFixed from '../../templates/CommentFixed'
import BacktoArticle from '../../templates/BacktoArticle'
// import { endWithGif } from '../../../common/util'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      articleid: '',
      relateArticles: [],
      labels: [],
      comtLength: '',
      digList: [],
      commentList: [],
      commtscount: '',
      articledtl: {},
      listType: 0,
      hasdata: 0
    }
  },
  mounted() {
    // console.log(this.$route.params)
    let param = this.$route.params

    var _this = this
    _this.articleid = param.id
    _this.getDetls()
    _this.getRelate()
    _this.getInterAction()
  },
  components: {
    WarningBox,
    ArticleLabel,
    RecomdArticles,
    RecomdProds,
    ZanReport,
    Comments,
    CommentFixed,
    BacktoArticle
  },
  computed: {
    ...mapGetters(['insq'])
  },
  methods: {
    getDetls: function () {
      var that = this
      ArticleDetail({ articleid: that.articleid })
        .then(function (res) {
          if (res) {
            console.log(res.article)
            that.articledtl = res.article
            that.labels = res.labels
            that.commtscount = res.article.commentcount
            that.initShare({ type: 0, info: { title: res.article.title, img: res.article.coverurl }})
            that.hasdata = 1
          } else that.hasdata = 2
        })
        .catch(function (err) {
          that.hasdata = 2
          console.log(err)
          that.toast('网络繁忙！')
        })
    },
    getRelate: function () {
      var that = this
      ArticleRelated({ articleid: that.articleid, relatedcount: 6 })
        .then(function (res) {
          if (res) {
            console.log(res)
            that.relateArticles = res
          } else {
            //    that.toast('网络繁忙！')
            console.log('没有推荐')
          }
        })
        .catch(function (err) {
          console.log(err)
          // that.toast('获取推荐失败')
        })
    },
    getInterAction: function () {
      var that = this
      ArticleDetailSub({ articleid: that.articleid })
        .then(function (res) {
          if (res) {
            if (res.comment && res.comment.length > 0) {
              that.comtLength = res.comment.length
            } else {
              that.comtLength = 0
            }
            that.commentList = res.comment
            that.digList = res.diglist.reverse()
          } else {
            // that.toast('网络繁忙！')
            console.log('没有评论')
          }
        })
        .catch(function (err) {
          console.log(err)
          // that.toast('获取评论失败')
        })
    }
  }
}
</script>
<style scoped>
.pic-recomd {
  padding: 10px 0;
  margin-top: 48px;
}
</style>
